<template>
  <!-- 后台管理模块父组件 -->
  <div class="modul-home">
    <!-- 按钮集合 -->
    <!-- <section class="buttons">
        <p
          style="
            font-size: 12px;
            color: #4f4f4f;
            margin-left: 15px;
            cursor: pointer;
          "
          @click="Previous"
        >
        </p>
        <div>
          <el-button @click="reloads" type="danger"
              ><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
            >
          
            <el-button @click="catJson">查看JSON </el-button>
            <el-button @click="$refs.file.click()">导入JSON </el-button>
            <el-button @click="exportJSON">导出JSON </el-button>
          <input
              type="file"
              ref="file"
              id="file"
              accept=".json"
              @change="importJSON"
              style="display: none"
            />
          <el-button @click="Preservation"
              ><i class="el-icon-s-claim el-icon--left"></i>保存</el-button
            >
        </div>
      </section> -->
    <!-- 装修操作 -->
    <section class="modul-operation">
      <div style="width: 100%" class="flex">
        <!-- 组件 -->
        <!-- 左侧抽屉式sliderassembly组件 -->
        <!-- 展开/收起按钮 -->
        <div class="toggle-sidebar-btn-container">
          <div
            v-if="!isSidebarOpen"
            class="toggle-sidebar-btn open"
            @click="toggleSidebar(true)"
          >
            展开 >>
          </div>
          <div
            v-else
            class="toggle-sidebar-btn close"
            @click="toggleSidebar(false)"
          >
            收起 >>
          </div>
          <transition name="sidebar-slide">
            <div class="sidebar-container" v-show="isSidebarOpen">
              <sliderassembly :pointer="pointer" />
            </div>
          </transition>
        </div>

        <!-- 中间预览 -->
        <!--页面编辑区域-->
        <div class="editor-main" style="width: 100%">
          <!-- <control-bar :scale.sync="projectData.scale" @save="saveEditor" /> -->
          <editor-pan @containerToolBtnChange="containerToolBtnChange" @containerItemClick="containerItemClick" />
        </div>

        <!-- 右侧工具栏 -->
        <div
          class="decorateAll"
          :style="{
            width: editorDrawer ? editorDrawerWidth + 'px' : '0',
            padding: editorDrawer ? '0 12px;' : '0',
          }"
        >
          <!-- 页面设置 -->
          <transition name="decorateAnima">
            <!-- 动态组件 -->
            <component :is="rightcom" :datas="currentproperties" />
          </transition>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import editFormheader from "@/components/components/editFormheader";
// / 引用公共的导航栏组件
import PublicNavBar from "@/components/public/NavBar";
// 引用左侧基础组件sliderassembly
import sliderassembly from "@/components/components/sliderassembly";
//引用头部导航
import headerTop from "@/components/components/headerTop";
//引用底部导航
import phoneBottom from "@/components/components/phoneBottom";
import utils from "@/utils/index"; // 方法类
import componentProperties from "@/utils/componentProperties"; // 组件数据
import html2canvas from "html2canvas"; // 生成图片
import FileSaver from "file-saver"; // 导出JSON

export default {
  name: "moduleIndex",
  inject: ["reload"],
  components: {
    sliderassembly,
    headerTop,
    phoneBottom,
    PublicNavBar,
    editFormheader,
  },
  data() {
    return {
      editorDrawer: false, //是否显示右侧编辑栏
      editorDrawerWidth: 800, // 右侧编辑栏的宽度
      isSidebarOpen: true, // 控制侧边栏显示/隐藏的状态
      activeIndex: 0,
      activeNavbarIndex: 0,
      horizontalWidth: "63%",
      navbarList: [
        { label: "微官网", path: "" },
        { label: "PC端官网", path: "" },
      ],
      realTimeView: {
        show: false, // 是否显示预览
      },
      id: null, //当前页面
      deleShow: true, //删除标签显示
      index: "", //当前选中的index
      rightcom: "", //右侧组件切换decorate
      pointer: { show: false }, //穿透
      currentproperties: {}, //当前属性
    };
  },
  computed: {
    // 引用modules模块的state
    ...mapState("modules", ["projectData", "activeElementUUID", "hoverChildItem"]),
  },
  created() {
    console.log("这里是模块首页---------", this.activeElementUUID);
  },

  methods: {
    // 调用modules模块的mutations
    ...mapMutations("modules", ["setActiveElementUUID", "setParentInfo"]),
    // 切换侧边栏显示/隐藏
    toggleSidebar(type) {
      this.isSidebarOpen = !this.isSidebarOpen;
    },
    // 顶部导航栏切换回调
    navbarClick(obj) {
      this.activeNavbarIndex = obj.index;
      this.horizontalWidth = obj.index == 0 ? "63%" : "73%";
      console.log("打印", obj);
    },
    // 容器按钮点击区域
    containerToolBtnChange(title) {
      console.log("传过来的容器按钮点击区域", title);
      if(title ==='删除' || title ==='上移' || title ==='下移') return //点击删除按钮不要弹出右侧操作栏
      // 设置当前选中的元素UUID为头部的特殊标识
      this.setActiveElementUUID("editorHead");
      // 点击其他容器，就需要去清空之前容器的信息对象
      this.setParentInfo();
    },
    // coantainer子组件容器点击区域
    containerItemClick(containerItem) {
      console.log("containemClickmClickmClickmClick", containerItem);
      // 显示公共企业名称主题色子组件
      this.rightcom = "editFormheader";
    },
  },

  watch: {
    /* 监听右侧属性设置切换 */
    activeElementUUID(newval) {
      console.log("moudle模块页面监听activeElementUUID设置切换11", newval, this.projectData,this.activeElementUUID,this.hoverChildItem);
      if (newval) {
        this.editorDrawer = true;
      } else {
        this.editorDrawer = false;
      }
    },
    rightcom(newval) {
      console.log("moudle模块页面监听右侧属性设置切换22", newval);
      // if (newval === "decorate") {
      //   utils.forEach(this.pageComponents, (res) => {
      //     /* 修改选中 */
      //     if (res.active === true) res.active = false;
      //   });
      //   this.currentproperties = this.pageSetup;
      //   return;
      // }
      // if (newval === "componenmanagement") {
      //   /* 替换 */
      //   utils.forEach(this.pageComponents, (res) => {
      //     /* 修改选中 */
      //     if (res.active === true) res.active = false;
      //   });
      //   this.currentproperties = this.pageComponents;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.pointer-events {
  pointer-events: none;
}

.modul-home {
  width: 100%;
  height: 100%;

  /* 删除组件 */
  .deles {
    position: absolute;
    min-width: 80px;
    text-align: center;
    line-height: 25px;
    background: #fff;
    height: 25px;
    font-size: 12px;
    right: -87px;
    cursor: pointer;
    .icon-sanjiaoxingzuo {
      position: absolute;

      left: -11px;
      color: #fff;
      font-size: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    &:hover {
      i {
        display: block;
        position: absolute;
        left: 0;
        font-size: 16px;
        top: 0;
        text-align: center;
        line-height: 25px;
        width: 100%;
        color: #fff;
        height: 100%;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
      }
      .icon-sanjiaoxingzuo {
        color: rgba(0, 0, 0, 0.5);
      }
    }

    i {
      display: none;
    }
  }

  /* 按钮集合 */
  .buttons {
    border-bottom: 1px solid #ebedf0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: 15px;
    align-items: center;
    /* 下拉 */
    .frop {
      padding-right: 15px;
      .el-button.el-button--primary.el-dropdown-selfdefine {
        background: #fff;
        color: #000;
        border: 1px solid #dcdee0;
      }
    }
    .el-button {
      font-size: 14px;
      padding: 0 16px;
      height: 30px;
      &.el-button--primary {
        background: #155bd4;
      }
      &.el-button--danger {
        background: red;
      }
    }
  }

  /* 操作主体 */
  .modul-operation {
    width: 100%;
    height: calc(100vh - 65px);
    display: flex;
    justify-content: space-between;
    background-color: var(--module-back-color);
    // 左侧导航栏容器样式
    .sidebar-container {
      height: 100%;
      flex-shrink: 0;
    }

    // 调整其他元素的宽度以适应新的侧边栏
    .phone {
      flex: 1;
      height: 100%;
      // overflow-y: scroll;
      display: flex;
      justify-content: center;
      background: #f7f8fa;
      &::-webkit-scrollbar {
        width: 1px;
      }
      // &::-webkit-scrollbar-thumb {
      //   background-color: #155bd4;
      // }

      /* 手机样式 */
      .phoneAll {
        width: 375px;
        height: 400px;
        height: calc(100vh - 250px);
        overflow: scroll;
        &::-webkit-scrollbar {
          //隐藏原生滚动轴
          width: 1px;
        }
        // min-height: 760px;
        box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
        margin: 15px 0 0 0;
        position: relative;
        padding-bottom: 50px;

        /* 手机高度 */
        .phoneSize {
          position: absolute;
          left: -137px;
          top: 640px;
          font-size: 12px;
          color: #a2a2a2;
          border-bottom: 1px solid #dedede;
          width: 130px;
          height: 21px;
          line-height: 21px;
        }
        .phoneBottom {
          margin-top: -30px;

          // position: absolute;
          // left: -137px;
          // top: 660px;
          // font-size: 12px;
          // color: #a2a2a2;
          // border-bottom: 1px solid #dedede;
          // width: 130px;
          // height: 21px;
          // line-height: 21px;
        }

        /* 状态栏 */
        .statusBar {
          width: 100%;
          display: block;
        }

        /* 主体内容 */
        .phone-container {
          min-height: 367px;
          box-sizing: border-box;
          cursor: pointer;
          width: 100%;
          position: relative;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .componentsClass {
            border: 1px solid #fff;
            &:hover {
              border: 1px dashed #155bd4;
            }
          }
        }
      }
    }
  }
  /* 左侧抽屉相关样式 */
  .toggle-sidebar-btn-container {
    position: relative;
    .toggle-sidebar-btn {
      cursor: pointer;
      position: absolute;
      width: 100px;
      height: 50px;
      background: #e5f1ff;
      box-sizing: border-box;
      border: 1px solid #ffffff;
      color: #348cf8;
      line-height: 50px;
      text-align: center;
    }
    .toggle-sidebar-btn.open {
      left: 0;
      top: 300px;
      border-radius: 0px 38px 38px 0px;
    }
    .toggle-sidebar-btn.close {
      right: 0;
      top: 650px;
      border-radius: 38px 0 0 38px;
    }
  }

  .sidebar-container {
    // position: fixed;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // width: 300px;
    background-color: #fff;
    // z-index: 1000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    // overflow-y: auto;
  }

  /* 左侧抽屉过渡动画 */
  .sidebar-slide-enter-active,
  .sidebar-slide-leave-active {
    transition: all 0.3s ease;
  }

  .sidebar-slide-enter,
  .sidebar-slide-leave-to {
    transform: translateX(-100%);
  }
  // 中间预览区
  .editor-main {
  }

  /* 右侧工具栏 */
  .decorateAll {
    width: 800px;
    height: 100%;
    // height: calc(100vh - 60px);
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    padding: 0 12px;
    background: #fff;
    transition: width 0.3s;
    &::-webkit-scrollbar {
      width: 1px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #155bd4;
    }
  }
}

/* 动画 */
.decorateAnima-enter-active {
  transition: all 1.5s ease;
}
.decorateAnima-leave-active {
  transition: all 1.5s ease;
}
.decorateAnima-enter {
  transform: translate(8px, 8px);
  opacity: 0;
}
.decorateAnima-leave-to {
  transform: translate(8px, 8px);
  opacity: 0;
}
</style>
